moviedice/src/app/(app)/list/[id]/loading.tsx

export default function ListLoading() {
  return (
    <div className="flex min-h-screen flex-col">
      {/* Header skeleton */}
      <header className="sticky top-0 z-10 border-b border-white/10 bg-background/80 backdrop-blur-sm">
        <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-3">
          <div className="h-7 w-40 animate-pulse rounded bg-white/10" />
          <div className="h-9 w-9 animate-pulse rounded-lg bg-white/10" />
        </div>
      </header>

      <main className="mx-auto w-full max-w-5xl flex-1 px-4 py-6">
        {/* Search bar skeleton */}
        <div className="mb-6">
          <div className="h-10 animate-pulse rounded-lg bg-white/10" />
        </div>

        {/* Roll buttons skeleton */}
        <div className="mb-8 flex gap-3">
          <div className="h-12 flex-1 animate-pulse rounded-lg bg-white/10" />
          <div className="h-12 flex-1 animate-pulse rounded-lg bg-white/10" />
        </div>

        {/* Movie grid skeleton */}
        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
          {Array.from({ length: 8 }).map((_, i) => (
            <div key={i} className="aspect-[2/3] animate-pulse rounded-lg bg-white/10" />
          ))}
        </div>
      </main>
    </div>
  );
}